import { ResponseCode } from "@/enum/ResponseCode";
import { getAppAnswerResultCount } from "@/servers/api/appStatisticController";
import { Pie } from "@ant-design/charts";
import { Button, Grid, Input, Message } from "@arco-design/web-react";
import { Fragment, useEffect, useState } from "react";
import "./index.less";
const InputSearch = Input.Search;
export default () => {
  const [data, setData] = useState<API.AppAnswerResultCountVO[]>();
  const [appId, setAppId] = useState<number>(1);
  const [config, setConfig] = useState({
    title: {
      title: "应用回答分布",
      titleFontSize: 25,
    },
    data,
    angleField: "resultCount",
    colorField: "resultName",
    label: {
      text: "resultCount",
      style: {
        fontWeight: "bold",
      },
    },
    tooltip: {
      title: (data: API.AppAnswerResultCountVO) => data.resultName,
    },
    legend: {
      color: {
        title: false,
        position: "right",
        rowPadding: 5,
      },
    },
  });
  const loadData = async () => {
    let res = await getAppAnswerResultCount({ appId });
    if (res.data.code === ResponseCode.SUCCESS) {
      setData(res.data.data as API.AppAnswerResultCountVO[]);
      setConfig({ ...config, data: res.data.data });
    } else {
      Message.error(res.data.message as string);
    }
  };
  useEffect(() => {
    loadData();
  }, []);
  return (
    <Fragment>
      <Grid.Row className="appResult">
        <InputSearch
          value={appId.toString()}
          allowClear
          //@ts-ignore
          onChange={(val) => setAppId(val)}
          style={{ background: "#fff" }}
          searchButton="搜索"
          placeholder="输入应用id"
          onSearch={loadData}
        />
      </Grid.Row>
      <Pie
        {...config}
        containerStyle={{
          borderRadius: "0 0 10px 10px",
          background: "#fff",
          height: "315px",
        }}
      />
    </Fragment>
  );
};
